<template>
	<header class="header">
		<h1>todos</h1>
		<input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox">
		<label for="toggle-all"></label>
		<input v-model.trim="content" @keyup.enter="add" class="new-todo" placeholder="输入任务名称-回车确认" autofocus />
	</header>
</template>

<script>
	export default {
		data(){
			return{
				content:''
			}
		},
		props:{
			arr:{
				type:Array,
				required:true,
			}
		},
		methods:{
			add(){
				console.log('实现输入框的添加功能',this.content);
				this.$emit('add',this.content)
				this.content=''
			}
		},
		computed: {
			isAll:{
				get(){
				return this.arr.every(item=>item.isDone)
			},
			set(val){
				this.arr.forEach(item=>item.isDone=val)
			}
			}
		}

	}
</script>
